import React from 'react';
import { Button } from 'antd';
import { WeaNewScroll, WeaSearchGroup } from 'ecCom';
import './../../style/searchcondition/SearchCondition';

export default class SearchCondition extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      _isshow: this.props.showSearchAd || 'none',
      _top: '46px',
    };
  }
  // 是否显示高级搜索
  showAdvanced() {
    let { _isshow } = this.state;
    if (_isshow == 'none') {
      _isshow = 'block';
    } else {
      _isshow = 'none';
    }
    this.setState({ _isshow, _top: $('.wea-develop-search-condition-main').outerHeight() });
  }
  componentWillReceiveProps(newProps) {
    if (this.props.locationkey != newProps.locationkey) {
      this.setState({ _isshow: newProps.showSearchAd });
    }
  }
  // scrollHeight-滚动条高度  searchsAd-高级查询条件列表  buttonsAd-高级查询列表页面按钮
  // 左侧查询条件 leftItems
  render() {
    const { searchsAd, buttonsAd, leftItems, scrollHeight, darkHeight } = this.props;
    const { _isshow, _top } = this.state;
    return (
      <div className="wea-develop-search-condition-main">
        {leftItems && leftItems.length > 0 && leftItems.map(element => (<div className="item-div-left">
                    {element.title && <span className="item-span-left item-span-left-title">{`${element.title}:`}</span>}
                    {element.btn && <span className="item-span-left">{element.btn}</span>}
                  </div>))}
        {searchsAd && searchsAd.length > 0 && <div className="item-span-right"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6480qm`} type="ghost" onClick={() => this.showAdvanced()}>高级搜索</Button></div>}
        <div className="condition-search-container" style={{ display: _isshow, top: _top }}>
            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@62qy4k`} height={scrollHeight || 300}>
                {
                  searchsAd && searchsAd.length > 0 && searchsAd.map(element => <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@4rwvij@${element.title}`} title={element.title} items={element.item} showGroup={element.showGroup || true} col={element.col || 2} />)
                }
            </WeaNewScroll>
            <div className="condition-search-buttons">
                <div style={{ textAlign: 'center' }}>
                    {buttonsAd}
                </div>
            </div>
        </div>
        <div className="condition-search-mask-dark" style={{ display: _isshow, height: `${darkHeight || window.innerHeight}px`, top: _top }} onClick={() => this.showAdvanced()} />
      </div>
    );
  }
}
